<template>
	<view :style="{ height: conentHeight + 'px;' }">
		<view class="top-height">
			<view class="page-top-box">
				<view class="search-box flex ac">
					<u-search
						borderColor="#DADADA"
						bgColor="#ffffff"
						placeholder="搜索项目名称"
						v-model="searchForm.project_name"
						:showAction="false"
						@search="searchFunc"
						@clear="searchFunc"
					></u-search>
					<view class="search-btn flex ac" @click="searchShow = true" :style="searchShow ? 'color:#3B75FF;' : ''">
						筛选
						<text class="iconfont icon-shaixuan" :style="searchShow ? 'color:#3B75FF;' : ''"></text>
					</view>
					<u-button
						v-if="$isPer(per_arr, ['fkd_add'])"
						@click="navToAddFunc"
						customStyle="width: auto;height: 64rpx;background: #3B75FF;border-radius: 32rpx;border-color:#F8F8FA;font-weight: 400;font-size: 26rpx;color: #ffffff;margin-left:20rpx;"
						:hairline="false"
						text="付款单申请"
					></u-button>
				</view>
			</view>
		</view>
		<view class="list-content-box" :style="{ height: 'calc(100% - ' + topHeight + 'px);' }">
			<z-paging ref="paging" :fixed="false" v-model="dataList" @query="queryList" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<template slot="empty">
					<u-empty icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
				</template>
				<view class="list-items flex ac flex-wrap" :key="index" v-for="(item, index) in dataList" @click.stop="navToDetailFunc(item)">
					<view class="list-items-title flex ac jb" v-if="$fieldShowFunc('sfk_xmmc')">
						<view class="title u-line-1">{{ item.project_name }}</view>
					</view>
					<view class="list-items-item flex ac">
						<!-- 付款类型 -->
						<template v-if="$fieldShowFunc('sfk_fklx')">
							<u-tag v-if="item.pay_type == 1" text="工程款" size="mini"></u-tag>
							<u-tag v-if="item.pay_type == 2" text="供应商货款" size="mini"></u-tag>
							<u-tag v-if="item.pay_type == 3" text="装修退款" size="mini"></u-tag>
						</template>
						<!-- 收款单状态 -->
						<view v-if="$fieldShowFunc('sfk_fkzt')">
							<u-tag
								v-if="item.payment_status == 1"
								text="待审核"
								size="mini"
								color="#FF9C0E"
								bgColor="rgba(255, 172, 59, .15)"
								borderColor="rgba(255, 172, 59, .15)"
							></u-tag>
							<u-tag
								v-if="item.payment_status == 2"
								text="待重新提交"
								size="mini"
								color="#FF9C0E"
								bgColor="rgba(255, 172, 59, .15)"
								borderColor="rgba(255, 172, 59, .15)"
							></u-tag>
							<u-tag
								v-if="item.payment_status == 3"
								text="待审核"
								size="mini"
								color="#34B325"
								bgColor="rgba(52, 179, 37, .15)"
								borderColor="rgba(52, 179, 37, .15)"
							></u-tag>
							<u-tag
								v-if="item.payment_status == 4"
								text="待审核"
								size="mini"
								color="#34B325"
								bgColor="rgba(52, 179, 37, .15)"
								borderColor="rgba(52, 179, 37, .15)"
							></u-tag>
							<u-tag
								v-if="item.payment_status == 5"
								text="已通过，未付款"
								size="mini"
								color="#3B75FF"
								bgColor="rgba(59, 117, 255, .15)"
								borderColor="rgba(59, 117, 255, .15)"
							></u-tag>
							<u-tag
								v-if="item.payment_status == 6"
								text="已付款"
								size="mini"
								color="#3B75FF"
								bgColor="rgba(59, 117, 255, .15)"
								borderColor="rgba(59, 117, 255, .15)"
							></u-tag>
						</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('sfk_xmbh')">
						<view class="title">项目编号</view>
						<view class="desc u-line-1">{{ item.project_number }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('sfk_sqje')">
						<view class="title">申请金额</view>
						<view class="desc u-line-1">{{ item.apply_amount }}</view>
					</view>
					<view class="list-items-item flex ac" v-if="item.pay_type == 1">
						<view class="title">付款事由</view>
						<view class="desc u-line-1">
							<template v-if="item.apply_type == 1">基准收付款(40%)</template>
							<template v-if="item.apply_type == 2">过程验收款(20%)</template>
							<template v-if="item.apply_type == 3">设备调试款(30%)</template>
							<template v-if="item.apply_type == 4">基准尾款(10%)</template>
							<template v-if="item.apply_type == 5">增项基准(100%)</template>
							<template v-if="!item.apply_type">--</template>
						</view>
					</view>
					<view class="list-items-item flex ac" v-if="$fieldShowFunc('sfk_sqsj')">
						<view class="title">申请时间</view>
						<view class="desc u-line-1">{{ item.created_at }}</view>
					</view>
					<!-- 按钮 -->
					<view style="width: 100%">
						<judgeBtn plain :per_arr="per_arr" object-type="payment" :btns="btns" :state="item.payment_status" :item="item" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
		</view>
		<!-- 筛选弹窗 -->
		<u-popup :show="searchShow" round="30" @close="searchShow = false" closeable>
			<view class="search-popup-title">全部筛选</view>
			<scroll-view scroll-y class="search-popup-box">
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>付款类型</text>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view
							@click="searchSelectFunc('pay_type', item)"
							class="search-items-list-item u-line-1"
							:class="item.value == searchForm.pay_type ? 'search-items-list-item-active' : ''"
							hover-class="hover-class"
							v-for="(item, index) in searchListObj.pay_type.list"
							:key="index"
						>
							{{ item.label }}
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title">项目编号</view>
					<u--input placeholder="项目编号" border="surround" v-model="searchForm.project_number"></u--input>
				</view>
				<view class="search-items">
					<view class="search-items-title">申请金额</view>
					<u--input placeholder="申请金额" border="surround" v-model="searchForm.apply_amount"></u--input>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>付款状态</text>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view
							@click="searchSelectFunc('payment_status', item)"
							class="search-items-list-item u-line-1"
							:class="item.value == searchForm.payment_status ? 'search-items-list-item-active' : ''"
							hover-class="hover-class"
							v-for="(item, index) in searchListObj.payment_status.list"
							:key="index"
						>
							{{ item.label }}
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>申请人</text>
						<view
							class="search-items-title-right flex ac jc"
							hover-class="hover-class"
							v-if="searchListObj.apply_user_id.page != 1"
							@click="retractFunc('apply_user_id')"
						>
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view
							@click="searchSelectFunc('apply_user_id', item)"
							class="search-items-list-item u-line-1"
							:class="item.id == searchForm.apply_user_id ? 'search-items-list-item-active' : ''"
							hover-class="hover-class"
							v-for="(item, index) in searchListObj.apply_user_id.list"
							:key="index"
						>
							{{ item.name }}
						</view>
						<view
							class="search-items-list-more flex ac jc"
							hover-class="hover-class"
							@click="lookMoreFunc('apply_user_id')"
							v-if="searchListObj.apply_user_id.max != searchListObj.apply_user_id.list.length"
						>
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="btn-box flex ac jb">
				<u-button
					@click="reSearchValFunc"
					text="重置"
					customStyle="width: 248rpx;height: 82rpx;background: #242834;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
				<u-button
					@click="searchFunc"
					text="查询"
					customStyle="width: 422rpx;height: 82rpx;background: #3B75FF;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
			</view>
		</u-popup>
		<!-- 操作组件 -->
		<paymentOperate :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></paymentOperate>
	</view>
</template>

<script>
export default {
	name: '',
	props: {
		conentHeight: {
			default: 0
		},
		option: {
			type: Object,
			default: {}
		}
	},
	provide() {
		return {
			providedData: this.btns
		};
	},
	data() {
		return {
			searchShow: false,
			dataList: [],
			searchForm: {
				project_name: '',
				apply_amount: '',
				pay_type: '',
				project_number: '',
				payment_status: '',
				apply_user_id: ''
			},
			topHeight: 0,
			loading: false,
			searchListObj: {
				pay_type: {
					list: [
						{
							label: '工程款',
							value: 1
						},
						{
							label: '供应商货款',
							value: 2
						},
						{
							label: '装修退款',
							value: 3
						}
					],
					page: 1,
					num: 5,
					max: 0
				},
				payment_status: {
					list: [
						{
							label: '待一级审核',
							value: 1
						},
						{
							label: '待重新提交',
							value: 2
						},
						{
							label: '待二级审核',
							value: 3
						},
						{
							label: '待三级审核',
							value: 4
						},
						{
							label: '待付款',
							value: 5
						},
						{
							label: '已付款',
							value: 6
						}
					],
					page: 1,
					num: 5,
					max: 0
				},
				apply_user_id: {
					list: [],
					page: 1,
					num: 5,
					max: 0
				}
			},
			per_arr: [], //权限列表
			// 操作按钮
			btns: [
				{
					per_name: ['gck_gcjlsh', 'gystk_gcbjlsh', 'zxtk_khzjsh'],
					state: 1,
					name: '付款一审'
				},
				{
					per_name: ['gck_zjysh', 'gystk_zjlsh', 'zxtk_zjysh'],
					state: 3,
					name: '付款二审'
				},
				{
					per_name: ['gck_cwsh', 'gystk_cwsh', 'zxtk_cwsh'],
					state: 4,
					name: '付款三审'
				},
				{
					per_name: ['gck_cnsh', 'gystk_cnsh', 'zxtk_cnsh'],
					state: 5,
					name: '付款确认'
				},
				{
					per_name: 'fkd_edit',
					func: (item) => {
						if (item.payment_status == 2 && item.apply_user_id == uni.getStorageSync('userInfo').id) {
							return true;
						} else {
							return false;
						}
					},
					name: '重新提交'
				}
			],
			// 操作相关
			per_name: '',
			oper_item: {}
		};
	},
	mounted() {
		this.getAdminList();
		this.getHeight();
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/collectionPaymentManagement'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	watch: {},
	methods: {
		// 刷新当前操作数据
		refreshItemFunc() {
			console.log('刷新当前数据');
			let oper_item = this.oper_item;
			let index = this.dataList.findIndex((item) => {
				return item.id == oper_item.id;
			});
			if (index == -1) return;
			this.$Apipc
				.getPaymentOrderInfo({
					payment_id: oper_item.id
				})
				.then((res) => {
					console.log(res, '收款单详情');
					if (res.code == 200) {
						this.dataList[index] = res.data;
						this.dataList.splice(0, 0);
					}
				});
		},
		// 操作反馈
		handleSubmit(e) {
			this.refreshItemFunc();
		},
		// 操作事件
		btnsChange(e) {
			console.log(e);
			this.oper_item = e.item;
			let index = 0;
			let name = '';
			if (typeof e.per_name == 'string') {
				this.per_name = e.per_name;
				return;
			}
			switch (Number(e.item.pay_type)) {
				case 1:
					name = 'gck';
					break;
				case 2:
					name = 'gystk';
					break;
				case 3:
					name = 'zxtk';
					break;
				default:
			}
			index = e.per_name.findIndex((i) => {
				return i.includes(name);
			});
			this.per_name = e.per_name[index];
		},
		// 添加付款单
		navToAddFunc() {
			uni.navigateTo({
				url: '/pagesC/collectionManagement/addPayment/addPayment'
			});
		},
		// 重置弹窗筛选项
		reSearchValFunc() {
			this.searchForm = {
				project_name: '',
				apply_amount: '',
				pay_type: '',
				project_number: '',
				payment_status: '',
				apply_user_id: ''
			};
			this.$nextTick(() => {
				this.searchFunc();
			});
		},
		// 刷新列表
		searchFunc() {
			this.$refs.paging.reload();
			this.searchShow = false;
		},
		getHeight() {
			// 创建节点查询
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			const query = uni.createSelectorQuery().in(that);
			query.select('.top-height').boundingClientRect();
			query.exec((res) => {
				that.topHeight = res[0].height + systemInfo.statusBarHeight + 20;
				console.log(that.topHeight, res[0].height);
				setTimeout(() => {
					that.loading = true;
				}, 0);
			});
		},
		// 去详情
		navToDetailFunc(item) {
			this.oper_item = item;
			uni.navigateTo({
				url: '/pagesB/attachmentManagementDetail/attachmentManagementDetail?id=' + item.id
			});
		},
		queryList(page, num) {
			this.getPaymentOrder(page, num);
		},
		// 付款单列表
		getPaymentOrder(page, num) {
			let searchForm = this.searchForm;
			uni.showLoading({
				mask: true
			});
			this.$Apipc
				.getPaymentOrder({
					page,
					num,
					to_do: 0,
					apply_amount: searchForm.apply_amount,
					project_name: searchForm.project_name,
					pay_type: searchForm.pay_type,
					project_number: searchForm.project_number,
					payment_status: searchForm.payment_status,
					apply_user_id: searchForm.apply_user_id
				})
				.then((res) => {
					uni.hideLoading();
					console.log(res, '付款单列表');
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.list);
					}
				});
		},
		// 弹窗筛选项
		searchSelectFunc(type, item) {
			console.log(type, item);
			switch (type) {
				case 'pay_type':
					this.searchForm[type] = this.searchForm[type] == item.value ? '' : item.value;
					break;
				case 'payment_status':
					this.searchForm[type] = this.searchForm[type] == item.value ? '' : item.value;
					break;
				case 'apply_user_id':
					this.searchForm[type] = this.searchForm[type] == item.id ? '' : item.id;
					break;
				default:
			}
		},
		// 弹窗筛选项查看更多
		lookMoreFunc(type) {
			switch (type) {
				case 'apply_user_id':
					this.searchListObj.apply_user_id.page += 1;
					this.getAdminList();
					break;
				default:
			}
		},
		// 弹窗筛选项列表收起
		retractFunc(type) {
			switch (type) {
				case 'apply_user_id':
					this.searchListObj.apply_user_id.page = 1;
					this.getAdminList();
					break;
				default:
			}
		},
		// 用户列表
		getAdminList() {
			this.$Apipc
				.getAdminList({
					page: this.searchListObj.apply_user_id.page,
					num: this.searchListObj.apply_user_id.num,
					identity: 1,
					position_id_arr: [2]
				})
				.then((res) => {
					console.log(res, '用户列表');
					if (res.code == 200) {
						if (this.searchListObj.apply_user_id.page == 1) {
							this.searchListObj.apply_user_id.list = [];
						}
						this.searchListObj.apply_user_id.list = [...this.searchListObj.apply_user_id.list, ...res.data.list];
						this.searchListObj.apply_user_id.max = res.data.max;
					}
				});
		}
	}
};
</script>

<style lang="scss">
@import 'attachmentManagement.scss';
</style>
